<template>
    <a-layout-header class="header">
      <div class="logo" >海洋生物知识库</div>
     <a-menu
        theme="dark"
        mode="horizontal"
        :style="{ lineHeight: '64px' , display:'block'}"
      >
      <a-menu-item key="/"  :style="{float:'left'}" >
        <router-link to="/">首页</router-link>
      </a-menu-item>
      <a-menu-item key="/admin/user"   :style="{float:'left'}"   >
        <router-link to="/admin/user"  v-show="currentUser.id" >用户管理</router-link>
      </a-menu-item>
      <a-menu-item key="/admin/ebook" :style="{float:'left'}"  >
        <router-link to="/admin/ebook" v-show="currentUser.id" >海洋生物种类管理</router-link>
      </a-menu-item>
      <a-menu-item key="/admin/category" :style="{float:'left'}"  >
        <router-link to="/admin/category"  v-show="currentUser.id" >海洋生物分类管理</router-link>
      </a-menu-item>
      <a-menu-item key="/about"  :style="{float:'left'}" >
        <router-link to="/about">关于我们</router-link>
        
      </a-menu-item>
<a-menu-item   :style="{float:'right'}" >
          <a-popconfirm
          title="确认退出登录?"
          ok-text="是"
          cancel-text="否"
          @confirm="logout()"
      >
          <a  v-show="currentUser.id" >退出登录</a>
        </a-popconfirm>
        </a-menu-item>
            
            
      <a-menu-item key="user"  :style="{float:'right'}"  >
        <span v-show="currentUser.id" >您好：{{currentUser.name}}</span>
      </a-menu-item>

      <a-menu-item key="login"  :style="{float:'right'}" >
        <a v-show="!currentUser.id"   @click="showLoginModal">登录</a>
      </a-menu-item>      
          
  

    </a-menu>

      <a-modal
        title="登录"
        v-model:visible="loginModalVisible"
        :confirm-loading="loginModalLoading"
        @ok="login"
    >
      <a-form :model="loginUser" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="登录名">
          <a-input v-model:value="loginUser.loginName" />
        </a-form-item>
        <a-form-item label="密码">
          <a-input v-model:value="loginUser.password" type="password" />
        </a-form-item>
      </a-form>
    </a-modal>
    </a-layout-header>
</template>
<script setup>
import { message } from "ant-design-vue";
import axios from 'axios';
import { computed, ref } from 'vue';
import store from '@/store';

// 声明全局变量（如果使用TS可能需要声明，JS中通常不需要）
// declare let hexMd5: any;
// declare let KEY: any;

// 登录表单数据
const loginUser = ref({
  loginName: "",
  password: ""
});

// 从store获取当前用户（使用计算属性）
const currentUser = computed(() => store.state.user);

// 登录模态框状态
const loginModalVisible = ref(false);
const loginModalLoading = ref(false);

import { useRouter } from 'vue-router';
const router = useRouter();
// 显示登录模态框
const showLoginModal = () => {
  //跳转到登录页面
  router.push('/login');
};


const user =ref();
const login = () => {
  console.log("开始登录");
  loginModalLoading.value = true;
  
  // 密码加密（确保hexMd5和KEY已定义）
  // loginUser.value.password = hexMd5(loginUser.value.password + KEY);
  
  loginUser.value.password = loginUser.value.password;

  
  axios.post('/user/login', loginUser.value).then((response) => {
    loginModalLoading.value = false;
    const data = response.data;
    
    if (data.success) {

      loginModalVisible.value = false;
      console.log("登录成功返回数据:", data);
      
      user.value = data.content;
      // 更新store中的用户信息
      store.commit("setUser",user.value); 
      
      message.success("登录成功！");
    } else {
      message.error(data.message);
      loginModalLoading.value = false;
    }
  }).catch(error => {
    loginModalLoading.value = false;
    message.error("登录失败: " + error.message);
  });
};

// 退出登录
const logout = () => {
  console.log("退出登录开始");
  axios.get('/user/logout/' + currentUser.value.token).then((response) => {
    const data = response.data;
    if (data.success) {
      message.success("退出登录成功！");
      // 清空store中的用户信息
      store.commit("setUser", {});
    } else {
      message.error(data.message);
    }
  }).catch(error => {
    message.error("退出登录失败: " + error.message);
  });
};
</script>
<style scoped>


.logo {
  width: 150px;
  height: 31px;
  /*background: rgba(255, 255, 255, 0.2);*/
  /*margin: 16px 28px 16px 0;*/
  float: left;
  color: white;
  font-size: 18px;
}
</style>